<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
</head>
<style>
    
    img{
        border-radius: 50%;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
    .fade-enter-active {
        animation: bounceInLeft 1.3s;
    }
    .fade-leave-active {
        animation: bounceOutRight 1.3s;
    }
    .appear-slide{
        animation: rubberBand 1.3s;
    }
</style>

<body>
    <div id="app">
        <h2>{{title}}</h2>

        <div>
            <transition name='fade' appear appear-active-class="appear-slide">
                <img v-show="show"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.a0bi.com%2Fupload%2Fttq%2F20140810%2F1407671462114.jpg&refer=http%3A%2F%2Fimg2.a0bi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638598600&t=b4d255d82fe9b7a3ca507965997bb0c8"
                    class=" myimg" alt="">
            </transition>
            <button @click='show=!show'>点击切换</button>
        </div>

    </div>




    <script>
        const vm = new Vue({
            data: {
                title: "Vue 添加动画--transition",
                show: true,
                shou1:true,
            }
        }).$mount('#app')
    </script>
                <!-- 

            route  页面切换    进入和离开的动画  

            Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
            v-if
            v-show
            组件切换  (动态组件切换  子组件切换)


            过渡  (0-1)  
            在进入/离开的过渡中，会有 6 个 class 切换
            v-enter  进入之前    开始帧 过渡
            v-enter-active 正在进入   animation
            v-enter-to  进入完成   结束帧

            v-leave  离开之前
            v-leave-active  正在离开
            v-leave-to   离开完成

            v-   transition 没有name 默认 v-
            transition 添加 name = fade  v 替换成 fade 

            初始化渲染 过渡 
            appear
            appear-active-class  动画 

            v-if / v-show 
            -->
</body>

</html>